<#include "/able/_inc/_head.html"/>
<#include "/able/_inc/_layout.html"/>

<!DOCTYPE HTML>
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if !IE]><!-->
<html lang="${lang}">

<head>
    <@head />
</head>
<body>
<@layout>
<div class="wrap-content" id="container">
<!-- start: PAGE TITLE -->
<section id="page-title" >
    <div class="row">
        <div class="col-sm-8">
            <label>站点 - 站点设置</label>
        </div>

    </div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: BASIC TABLE -->
<div class="container-fluid container-fullw bg-white">
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-info">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <div><i class="fa fa-question-circle"></i>操作提示</div>
                <ul>
                    <li>该页面展示了商城所有的广告。</li>
                    <li>可搜索广告名称关键词进行查询，侧边栏可进行高级搜索。</li>
                </ul>
            </div>

            <div class="tabbable">
                <ul id="myTab1" class="nav nav-tabs">
                    <li class="active">
                        <a href="#tab-01" data-toggle="tab">
                            基础设置
                        </a>
                    </li>
                    <li>
                        <a href="#myTab1_example2" data-toggle="tab">
                           SEO设置
                        </a>
                    </li>
                    <!--<li>-->
                        <!--<a href="#myTab1_example3" data-toggle="tab">-->
                            <!--go-->
                        <!--</a>-->
                    <!--</li>-->
                </ul>

                <div class="tab-content">
                    <div class="tab-pane fade in active" id="tab-01">
                        <div class="row">
                            <div class="col-lg-8 col-md-12">
                                <form id="form" role="form" class="form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" for="siteName">
                                            网站名称：<span class="symbol required" aria-required="true"></span>
                                        </label>
                                        <div class="col-sm-7">
                                            <input type="hidden" id="siteId" name="siteId" value="${model.siteId}">
                                            <input id="siteName" name="siteName" type="text" class="form-control required" placeholder="" value="${model.siteName}">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" for="siteUrl">
                                             网站地址：<span class="symbol required" aria-required="true"></span>
                                        </label>
                                        <div class="col-sm-7">
                                            <input id="siteUrl" name="siteUrl" type="text" class="form-control required" placeholder="" value="${model.siteUrl}">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" for="fileupload">
                                            上传头像：<span class="symbol required" aria-required="true"></span>
                                        </label>
                                        <div class="col-sm-7">
                                            <input id="logo" name="logo" type="hidden">
                                            <span class="btn btn-primary fileinput-button">
                                                <i class="fa fa-cloud-upload"></i>
                                                <span>上传LOGO</span>
                                                <input id="fileupload" type="file" name="file" multiple>
                                            </span>
                                            <a href="${model.logo}" target="_blank" title="" class="preview btn btn-o btn-danger btn-xs">
                                                <i class="fa fa-image"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" for="copyright">
                                            版权设置：
                                        </label>
                                        <div class="col-sm-7">
                                            <textarea id="copyright" name="copyright" class="form-control" >${model.copyright}</textarea>
                                        </div>
                                    </div>


                                    <div class="form-group margin-bottom-0">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button class="btn  btn-primary" type="submit">
                                                确定
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="myTab1_example2">
                        <div class="row">
                            <div class="col-lg-12 col-md-12">
                                <form id="form-seo" role="form" class="form-horizontal">

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="keywords">
                                            标题：
                                        </label>
                                        <div class="col-sm-8">
                                            <input type="hidden" name="siteId" value="${model.siteId}">
                                            <input id="title" type="text" name="title" placeholder="标题" class="form-control" value="${model.title}" >
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="keywords">
                                            关键字：
                                        </label>
                                        <div class="col-sm-8">
                                            <input id="keywords" type="text" name="keywords" placeholder="关键字" class="form-control" value="${model.keywords}" >
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="description">
                                            描述说明：
                                        </label>
                                        <div class="col-sm-8">
                                            <textarea id="description" name="description" placeholder="描述说明" class="form-control">${model.description}</textarea>
                                        </div>
                                    </div>

                                    <div class="form-group margin-bottom-0">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button class="btn  btn-primary" type="submit">
                                                确定
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="myTab1_example3">
                        <p>
                            Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin.
                        </p>
                        <p>
                            Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
                        </p>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>




</@layout>


<script type="text/javascript" >

    var FormValidator=function () {
        var formValidator=function () {
            var form = $('#form');
            var errorHandler = $('.errorHandler', form);
            var successHandler = $('.successHandler', form);
            form.validate({
                errorElement: "span", // contain the error msg in a small tag
                errorClass: 'help-block',
                errorPlacement: function (error, element) { // render error placement for each input type
                },
                ignore: "",
                rules: {
                },
                messages: {
                },
                invalidHandler: function (event, validator) { //display error alert on form submit
                    successHandler.hide();
                    errorHandler.show();
                },
                highlight: function (element) {
                    $(element).closest('.help-block').removeClass('valid');
                    // display OK icon
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
                    // add the Bootstrap error class to the control group
                },
                unhighlight: function (element) { // revert the change done by hightlight
                    $(element).closest('.form-group').removeClass('has-error');
                    // set error class to the control group
                },
                success: function (label, element) {
                    label.addClass('help-block valid');
                    // mark the current input as valid and display OK icon
                    $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
                },
                submitHandler: function (form) {
                    successHandler.show();
                    errorHandler.hide();
                    $.ajax({
                        type:'post',
                        url: global.adminPath + '/site/update',
                        async:false, //同步方法，如果用异步的话，flag永远为1
                        dataType:'json',
                        data:$(form).serialize(),
                        success: function(res){
                            if(res.success){
                                layer.msg(res.message, {
                                    icon: 1,
                                    time: 2000, ///2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    //location.href="/index#/role";
                                });
                            }else{
                                layer.msg(res.message, {icon: 2});
                            }
                        }
                    });
                }
            });
        };
        var formSEO=function () {
            var form = $('#form-seo');
            var errorHandler = $('.errorHandler', form);
            var successHandler = $('.successHandler', form);
            form.validate({
                errorElement: "span", // contain the error msg in a small tag
                errorClass: 'help-block',
                errorPlacement: function (error, element) { // render error placement for each input type
                },
                ignore: "",
                rules: {
                },
                messages: {
                },
                invalidHandler: function (event, validator) { //display error alert on form submit
                    successHandler.hide();
                    errorHandler.show();
                },
                highlight: function (element) {
                    $(element).closest('.help-block').removeClass('valid');
                    // display OK icon
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
                    // add the Bootstrap error class to the control group
                },
                unhighlight: function (element) { // revert the change done by hightlight
                    $(element).closest('.form-group').removeClass('has-error');
                    // set error class to the control group
                },
                success: function (label, element) {
                    label.addClass('help-block valid');
                    // mark the current input as valid and display OK icon
                    $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
                },
                submitHandler: function (form) {
                    successHandler.show();
                    errorHandler.hide();
                    $.ajax({
                        type:'post',
                        url: global.adminPath + '/site/update',
                        async:false, //同步方法，如果用异步的话，flag永远为1
                        dataType:'json',
                        data:$(form).serialize(),
                        success: function(res){
                            if(res.success){
                                layer.msg(res.message, {
                                    icon: 1,
                                    time: 2000, ///2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    //location.href="/index#/role";
                                });
                            }else{
                                layer.msg(res.message, {icon: 2});
                            }
                        }
                    });
                }
            });
        };
        return {
            init: function () {
                formValidator();
                formSEO();
            }
        };
    }();


    $(function () {
        $("a.preview").preview();
        FormValidator.init();

        $('#fileupload').fileupload({
            inputid:'fileupload',//我要实例化哪个标签
            url: 'upload/logo/',//服务端的地址
            dataType: 'json',//数据格式，ajax你懂的
            autoUpload: true,//是否选了文件就直接自动上传
            maxNumberOfFiles:1,//最多同时上传几个文件
            maxFileSize: 5000000,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            //maxChunkSize:10000,//最大接收文件大小
            done: function (e, data) {//上传完了干嘛
                var res=data.result;
                if (res.success){
                    $('a.preview').attr('href',res.url);
                    $('#logo').val(res.url);
                }

                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0, //不显示关闭按钮
                    shade: [0],
                    area: ['300px', '200px'],
                    offset: 'rb', //右下角弹出
                    time: 2000, //2秒后自动关闭
                    anim: 2,
                    content: res.message, //iframe的url，no代表不显示滚动条
                    end: function(){ //此处用于演示

                    }
                });
            },
            progressall: function (e, data) {//上传过程中，隔段时间就会调起的回调函数，这个东西，主要是用来返回进度的，你看里面的引用，没错，它带回来的参数值，只有total、loaded这种数字。

            },
            processalways:function (e, data) {//这货是干嘛的呢？就是上传之前调起的函数。没错，如果你选择了自动上传，那么当你点选完了文件，这个货就会被调起。

            }
        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');//不用猜了，就是看看是不是支持jqueryajax上传方式。就是上面说的那个frame东东。
    });





</script>
